<template>
	<view class="order_detail">
		<view class="order-all" v-if="type == 0">
			 <view class="order-status" v-if="order_detail.status != '待支付'">
				<text>{{order_detail.status}}</text>
			 </view>
			 <view class="order-info" v-if="order_detail.status != '已完成'">
				 <view class="name fz16 font-weight">
					 <text>{{order_detail.name}}</text>
					 <text v-if="order_detail.status == '待支付'">{{order_detail.status}}</text>
				 </view>
				 <view class="ticket-name fz14">
					 <text>门票 - {{order_detail.spotTicketTitle}}</text>
					 <!-- <text style="color: #ff4d1d;">¥ {{order_detail.payAmount}}x{{order_detail.num}}</text> -->
					 <text style="color: #ff4d1d;">¥ {{order_detail.payAmount}}</text>
				 </view>
				 
				 <view style="color: #666666;" >
					 <text>游玩时间：{{order_detail.travelDate}}</text>
				 </view>
				 <view v-if="order_detail.status != '待支付' " style="color:#666666;border-bottom: 1upx solid #eee;padding-bottom: 20upx;">
					 <text>入园时间：凭购票短信中的入园凭证进入</text>
				 </view>
				 <view class="price fz14">
					 <text>总价</text>
					 <text style="color: #ff4d1d;">{{order_detail.payAmount}}</text>
				 </view>
				 <view class="zhifu" v-if="order_detail.status == '待支付'">
					 <!-- <view @click="del()">
						 <text>删除</text>
					 </view> -->
					 
					 <view @click="cancel()">
						 <text>取消订单</text>
					 </view>
					 <view @click="goPay()">
						 <text>立即支付</text>
					 </view>
				 </view>
			 </view>
			 <view class="order-foot" v-if="order_detail.status != '待支付'">
				 <view>
					 <text>订单号:</text>
					 <text>{{order_detail.orderNumber}}</text>
				 </view>
				 <view>
					 <text>下单时间:</text>
					 <text>{{order_detail.createTime}}</text>
				 </view>
				 <view>
					 <text>支付方式:</text>
					 <text>在线支付</text>
				 </view>
				 <view></view>
			 </view>
			 <view class="return" >
				 <view v-if="isPaySuc == '1'" @click="goList()">
					 <text>返回首页</text>
				 </view>
				 <view @click="goReturn()" v-if="order_detail.status == '未使用'">
					 <text>退款申请</text>
				 </view>
			 </view>
		</view>
		
		<view class="order-all" v-if="type == 1">
			 <view class="order-status" v-if="order_detail.status != '待支付'">
				<text>{{order_detail.status}}</text>
			 </view>
			 <view class="order-info" v-if="order_detail.status != '已使用'">
				 <view class="name fz16 font-weight">
					 <text>{{order_detail.title}}</text>
					 <text v-if="order_detail.status == '待支付'">{{order_detail.status}}</text>
				 </view>
				 
				  <view class="ticket-name fz14" >
					 <text>房间 - {{order_detail.roomName}}</text>
					 <text style="color: #ff4d1d;">¥{{order_detail.payAmount}}</text>
					 
				 </view>
				 <view class="price fz14">
					 <text>总价</text>
					 <text style="color: #ff4d1d;">{{order_detail.payAmount}}</text>
				 </view>
				 <view class="zhifu" v-if="order_detail.status == '待支付'">
					<!-- <view @click="del()">
						 <text>删除</text>
					 </view> -->
					 <view @click="cancel()">
						 <text>取消订单</text>
					 </view>
					 <view @click="goPay()">
						 <text>立即支付</text>
					 </view>
				 </view>
			 </view>
			 <view class="order-foot" v-if="order_detail.status != '待支付'">
				 <view>
					 <text>订单号:</text>
					 <text>{{order_detail.orderNumber}}</text>
				 </view>
				 <view>
					 <text>下单时间:</text>
					 <text>{{order_detail.createTime}}</text>
				 </view>
				 <view>
					 <text>支付方式:</text>
					 <text>在线支付</text>
				 </view>
				 <view></view>
			 </view>
			 <view class="return" >
				 <view v-if="isPaySuc == '1'" @click="goList()">
					 <text>返回首页</text>
				 </view>
				 <view @click="goReturn()" v-if="order_detail.status == '未使用'">
					 <text>退款申请</text>
				 </view>
			 </view>
		</view>
		
		<view v-if="type==3">
			<shoppingorderdetail :orderNumber='datalist.orderNumber' :orderid="datalist.orderid"></shoppingorderdetail>
		</view>
	</view>
</template>

<script>
	import shoppingorderdetail from '@/components/shoppingorderdetail.vue';
	export default {
		components: {
			shoppingorderdetail,
		},
		data() {
			return {
				orderNumber:'',
				datalist:{},
				order_detail:[],
				type:'',
				jumpUrl:'',
				isPaySuc:'0',
				orderid:""
			};
		},
		onLoad:function(options){
			console.log("订单详情接受的参数---------------------》",options)
			this.datalist.orderNumber = options.orderNumber
			this.datalist.orderid = options.id
			this.type = options.type;
			var that = this;
			uni.getStorage({
				key:'order_detail',
				success:(res)=>{
					console.log("订单详情----------->",res.data);
					that.order_detail = res.data;
					that.orderid = that.order_detail.id;
					switch(that.order_detail.status){
						case '1':
							that.order_detail.status = '待支付'
						break;
						case '2':
							that.order_detail.status = '未使用'
						break;
						case '3':
							that.order_detail.status = '已使用'
						break;
						case '4':
							that.order_detail.status = '已取消'
						break;
						case '5':
							that.order_detail.status = '退款中'
						break;
						case '6':
							that.order_detail.status = '已退款'
						break;
					}
					
					console.log("this.orderid---------------------------->",that.orderid)
				}
			});
			
			console.log("支付成功页PaySuccess传过来的参数------------->",options);
			this.isPaySuc = options.isPaySuc == "1" ? '1' : '0';
			
			
			
			switch(this.type){
				//门票
				case '0' :
					this.jumpUrl = '/pages/scence/scencelist'
				break;
				//酒店
				case '1' :
					this.jumpUrl = '/pages/hotel/hotellist'
				break;
				//购物
				case '3' :
					// this.jumpUrl = '/pages/scence/scencelist'
				break;
			}
			// this.getOrderDetail(options.orderid)
		},
		methods:{
			//获取订单详情
			getOrderDetail(id){
				var params = {
					id:id
				}
				this.$postApi(this.$path.GOODS_ORDER_DETAIL,params).then(res=>{
					console.log("返回的订单详情>>>>>>>>>>>>>>",res.data)
					this.orderid = res.data.data.id
				})
				
				
			},
			del(){
				uni.showModal({
					title:"提示",
					content:"确认删除订单吗？",
					icon:"none",
					success:res=>{
						 if (res.confirm) {
							console.log('用户点击确定');
							// this.returnCancel();
							this.deleteOrder();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			deleteOrder(){
				var param = {
					orderId: this.order_detail.parentId
				}
				uni.showLoading({
					title: '加载中'
				});
				this.$postApi(this.$path.DELETE_ORDER,param).then(res => {
					console.log("删除订单返回----------->",res.data);
					if(res.data.success){
						uni.showToast({
							title:'订单删除成功',
							duration:3000
						})
						setTimeout(function(){
							uni.navigateBack({
							
							})
						},3000);
					}else{
						uni.showToast({
							title:res.data.rMsg,
							icon: 'none',
							duration: 3000
						});
					}
				})
			},
			cancelOrder(){
				//酒店取消订单
				if(this.type == 1){
					let params = {
						orderNumber:this.order_detail.orderNumber,
						orderId:this.order_detail.orderId,
						bustype:this.order_detail.bustype
					}
					this.$postApi(this.$path.HOTE_ORDER_CANCEL,params).then(res => {
						console.log("取消的订单返回------------>",res.data)
						if(res.data.success){
							uni.showToast({
								title:'订单取消成功',
								duration:2000,
								
							})
							setTimeout(function(){
								uni.navigateBack({
								
								})
							},2000);
						}else{
							uni.showToast({
								title:res.data.rMsg,
								icon: 'none',
								duration: 3000
							});
						}
					})
				}else{
					var param = {
						bustype:'2',
						orderNumber:this.order_detail.orderNumber,
						orderId:this.orderId,
					}
					this.$postApi(this.$path.GET_SCENICSPOT_ORDERCLEAR,param).then(res => {
						console.log("取消订单返回---------->",res.data);
						if(res.data.success){
							uni.showToast({
								title:'订单取消成功',
								duration:3000,
								
							})
							setTimeout(function(){
								uni.navigateBack({
								
								})
							},3000);
						}else{
							uni.showToast({
								title:res.data.rMsg,
								icon: 'none',
								duration: 3000
							});
						}
					})
				}
				
			},
			cancel(){
				uni.showModal({
					title:"提示",
					content:"确认取消订单吗？",
					icon:"none",
					success:res=>{
						 if (res.confirm) {
							console.log('用户点击确定');
							// this.returnCancel();
							this.cancelOrder();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				
			},
			
			goPay(){
				var obj = {
					bustype:this.order_detail.bustype,
					orderId : this.orderid,
					parentOrderId :this.order_detail.parentId,
					totalPrice : this.order_detail.payAmount,
					name:this.order_detail.spotTicketTitle,
					payAmount:this.order_detail.payAmount,
				}
				// obj.orderId = data.data.retData.orderId
				// obj.parentOrderId = data.data.retData.parentOrderId
				uni.navigateTo({
					url: '/pages/scenicOrder/counter?data=' + JSON.stringify(obj),
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			goList(){
				uni.reLaunch({
					url:this.jumpUrl
				})
			},
			returnCancel(){
				
				let param = this.type == 0 ? {
					orderNumber:this.order_detail.orderNumber,
					orderId:this.order_detail.orderId,
					bustype:'2'
				}:{
					bustype:'2',
					orderId:this.order_detail.orderId,
					orderNumber:this.order_detail.orderNumber,
				}
				let url = this.type == 0 ? this.$path.NEW_REFUND_INFO_SLIST:this.$path.NEW_HOTEL_REFUND;
				
				uni.showLoading({
					title: '加载中'
				});
				this.$postApi(url,param).then(res=>{
					uni.hideLoading();
					console.log("退款返回数据---------->",res.data);
					if(res.data.success){
						uni.showToast({
							title:'退款申请成功',
							duration:3000,
						});
						setTimeout(()=>{
							//如果这个状态是1说明是从支付成功页面的查看详情进入，
							//此时触发退款后路由返回到景区列表而非上一级
							if(this.isPaySuc == '1'){
								console.log("!1111111");
								uni.reLaunch({
									url:'/pages/scence/scencelist'
								})
							}else{
								console.log("!2222222");
								uni.navigateBack({
							
								})
							}
							
						},3000);
					}else{
						uni.showToast({
							title:res.data.rMsg,
							icon: 'none',
							duration: 3000
						});
					}
				})
			},
			goReturn(){
				uni.showModal({
					title:"提示",
					content:"确认退款吗？",
					icon:"none",
					success:res=>{
						 if (res.confirm) {
							console.log('用户点击确定');
							this.returnCancel();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.order_detail{
		font-size: 26upx;
		background:#f5f5f5;
		min-height: 100%;
		
		
		.order-all{
			// background: #fff;
			
		}
		.order-status{
			margin-top:20upx;
			background: #fff;
			padding: 30upx;
			border-radius: 14upx;
		}
		.order-info{
			margin-top: 20upx;
			display: flex;
			flex-direction: column;
			
			justify-content: space-between;
			height: 400upx;
			background: #fff;
			padding: 30upx;
			border-radius: 14upx;
			.name{
				display: flex;
				justify-content: space-between;
				// margin-top: -20upx;
				padding-bottom: 15upx;
				border-bottom: 1upx solid #eee;
			}
			.ticket-name,.price{
				display: flex;
				justify-content: space-between;
			}
			.zhifu{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				view{
					width: 160upx;
					border: 1upx solid #ccc;
					text-align: center;
					font-size: 28upx;
					line-height: 50upx;
					border-radius: 8upx;
					margin-left: 20upx;
				}
				view:last-of-type{
					background: #ff4d1d;
					color: #fff;
					border: 1upx solid #ff4d1d;
				}
			}
			
		}
		.order-foot{
			margin-top: 20upx;
			display: flex;
			flex-direction: column;
			height: 260upx;
			background: #fff;
			padding: 30upx;
			border-radius: 14upx;
			justify-content: space-between;
		}
		.return{
			margin-top: 20upx;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			font-size: 32upx;
			view{
				width: 200upx;
				height: 70upx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				color: #888;
				margin-right: 20upx;
				border-radius: 10upx;
				border: 1upx solid #888;
			}
		}
	}
</style>
